<template>
  <div class="echarts-map">
    <div class="echarts-map-box" ref="echartsMapBox"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import chinaJson from './china.json';

export default {
  mounted() {
    this.repRegionStrategy();
  },
  methods: {
    mergeProvinces(chinaJson, names, properties) {
      const features = chinaJson.features;
      const polygons = [];
      const polygons2 = [];

      for (let i = 0; i < names.length; i++) {
        const polygonsCoordinates = [];
        const polygonsEncodeOffsets = [];
        for (let z = 0; z < names[i].length; z++) {
          for (let j = 0; j < features.length; j++) {
            if (features[j].properties.name === names[i][z]) {
              if (features[j].geometry.coordinates[0].constructor === String) {
                for (let l = 0; l < features[j].geometry.coordinates.length; l++) {
                  polygonsCoordinates.push(features[j].geometry.coordinates[l]);
                }
              } else if (features[j].geometry.coordinates[0].constructor === Array) {
                for (let k = 0; k < features[j].geometry.coordinates.length; k++) {
                  for (let d = 0; d < features[j].geometry.coordinates[k].length; d++) {
                    polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);
                  }
                }
              }

              if (features[j].geometry.encodeOffsets[0].constructor === String) {
                polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets);
              } else if (features[j].geometry.encodeOffsets[0].constructor === Array) {
                for (let k = 0; k < features[j].geometry.encodeOffsets.length; k++) {
                  if (features[j].geometry.encodeOffsets[k][0].constructor === Array) {
                    for (let e = 0; e < features[j].geometry.encodeOffsets[k].length; e++) {
                      polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k][e]);
                    }
                  } else {
                    polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k]);
                  }
                }
              }

              break;
            }
          }
        }
        polygons.push(polygonsCoordinates);
        polygons2.push(polygonsEncodeOffsets);
      }

      const newFeatures = [];

      for (let a = 0; a < names.length; a++) {
        const newFeature = {
          id: newFeatures.length.toString(),
          type: "FeatureCollection",
          geometry: {
            type: "Polygon",
            coordinates: polygons[a],
            encodeOffsets: polygons2[a]
          },
          properties: {
            name: properties.name[a] || "",
            childNum: polygons[a].length
          },
          temStyle: { normal: { areaColor: 'red', label: { show: false } } }
        };
        if (properties.cp[a]) {
          newFeature.properties.cp = properties.cp[a];
        }
        newFeatures.push(newFeature);
      }

      chinaJson.features = newFeatures;
    },
    repRegionStrategy() {
      this.$nextTick(() => {
        this.initEchartsMap();
      });
    },
    initEchartsMap() {
      const myChart = echarts.init(this.$refs.echartsMapBox);
      const params = {
        names: [
          ['湖南', '广东', '广西', '海南', '云南', '贵州'],
          ['辽宁', '吉林', '黑龙江', '内蒙古', '山东'],
          ['四川', '西藏', '陕西', '甘肃', '宁夏', '青海', '新疆', '重庆'],
          ['河北', '山西', '山东', '河南', '湖北', '北京', '天津'],
          ['江苏', '浙江', '安徽', '福建', '江西', '上海']
        ],
        properties: {
          name: ['南部战区', '北部战区', '西部战区', '中部战区', '东部战区'],
          cp: [
            [111.653718, 28.101847],
            [123.42944, 43.586203],
            [104.075931, 30.650707],
            [114.520828, 38.048684],
            [121.473704, 31.230393]
          ]
        }
      };
      this.mergeProvinces(chinaJson, params.names, params.properties);

      console.log(chinaJson);

      echarts.registerMap('china', chinaJson);

      const data = [
        {
          "name": "南部战区",
          "value": 3685,
          "color": "#90ca88"
        },
        {
          "name": "北部战区",
          "value": 7342,
          "color": "#f09b7a"
        },
        {
          "name": "西部战区",
          "value": 10427,
          "color": "#c1e2cf"
        },
        {
          "name": "中部战区",
          "value": 25314,
          "color": "#7ab8e2"
        },
        {
          "name": "东部战区",
          "value": 2500,
          "color": "#f1bd4c"
        }
      ];

      const customSettings = [];
      data.forEach(function (item, index) {
        console.log(index);
        customSettings.push({
          name: item.name,
          itemStyle: {
            normal: {
              areaColor: item.color,
              color: item.color,
            },
          },
        });
      });

      const option = {
        tooltip: {
          show: false,
          formatter: function (params) {
            return params.seriesName + '<br />' + params.name + '：' + params.value;
          },
        },
        geo: {
          map: 'china',
          zoom: 0.7, // 调整缩放级别，可以根据需要进行调整
          center: [105, 35], // 调整中心点的经纬度，可以根据需要进行调整
          label: {
            normal: {
              show: true,
              color: 'rgba(0,0,0,0.4)',
              fontSize: 20,
            },
          },
          itemStyle: {
            normal: {
              borderWidth: 2,
              borderColor: 'rgba(0, 0, 0, 0.1)',
            },
            emphasis: {
              areaColor: '',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 10,
              borderWidth: 0,
              borderColor: 'rgba(0, 0, 0, 0)',
              shadowColor: '',
            },
          },
          regions: customSettings,
        },
        series: [
          {
            name: '',
            type: 'map',
            geoIndex: 0,
            data: data,
          },
        ],
      };

      myChart.setOption(option, true);

      myChart.on('mouseover', () => {
        // 处理鼠标悬浮事件
      });

      // setTimeout(() => {
      //   myChart.dispatchAction({
      //     type: 'highlight',
      //     name: '东北区',
      //   });
      // }, 3000);
    },
  },
};
</script>

<style scoped>
.echarts-map {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.echarts-map-box {
  width: 1000px;
  height: 700px;
  border: 1px solid #ccc;
}
</style>
